<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[type, ani, animation ? 'ani' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<view class="gift-wrap">
					<view class="user-wrap">
						<view class="user-avatar">
							<image class="avatar" :src="giftData.from.avatar" mode=""></image>
						</view>
						<view class="user-info">
							<view class="info-item">
								<text class="name">{{giftData.from.name}}</text>
							</view>
							<view class="info-item">
								<text class="info">送</text>
								<text class="name">{{giftData.to.name}}</text>
							</view>
						</view>
					</view>
					<view class="gift">
						<text class="gift-name">{{giftData.gift.name}}</text>
						<image class="gift-img" :src="giftData.gift.img" mode=""></image>
						<view class="gift-count">
							<text>x</text>
							<text class="count">{{giftData.gift.count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'GiftPopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: 'right'
			},
			show: {
				type: Boolean,
				default: true
			},
			giftData: {
				type: Object,
				default() {
					return {
						from: {
							id: '',
							name: '',
							avatar: '',
						},
						to: {
							id: '',
							name: '',
							avatar: '',
						},
						gift: {
							id: '',
							name: '',
							img: '',
							count: 1
						}
					};
				}
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {
			
		},
		methods: {
			clear() {},
			open() {
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
		}
	}
</script>
<style>
	@charset "UTF-8";

	.uni-popup {
		
	}

	.uni-popup__wrapper {
		width: 500rpx;
		height: 100rpx;
		position: absolute;
		left: 10rpx;
		top: 50%;
		z-index: 999;
		margin-top: -50rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}
	
	.uni-popup__wrapper.right {
		transform: translateX(200%)
	}

	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-popup__wrapper.uni-right {
		transform: translateX(0)
	}
	
	/* 礼物 */
	.gift-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.6));
		border-radius: 100rpx 0 0 100rpx;
	}
	.user-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.user-avatar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}
	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 90rpx;
	}
	.user-info {
		width: 200rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.info-item .name {
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.info-item .info {
		font-size: 24rpx;
		color: #FF76A8;
		margin-right: 5rpx;
	}
	.gift {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.gift-name {
		font-size: 24rpx;
		color: #FF76A8;
	}
	.gift-img {
		width: 80rpx;
		height: 80rpx;
	}
	.gift-count {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gift-count text {
		font-size: 24rpx;
		color: #ED4574;
		margin-right: 10rpx;
		font-weight: 700;
	}
	.gift-count .count {
		font-size: 48rpx;
	}
</style>